<template>
  <!-- 营业收入统计-消费明细 -->
  <div class="operating_income_stataistics">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <myTime @handleGetTime="handleGetTime"></myTime>
      <el-form-item label="消费点:">
        <el-select
          v-model="consumptionpoint"
          placeholder="请选择"
          size="mini"
          clearable
          multiple
          @visible-change="selcetconsumptionpoint"
          @clear="clearconsumptionpoint"
        >
          <!-- :disabled="ismustFlag" -->
          <el-option
            v-for="item in consumptionpointoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消费点内的消费机:">
        <el-select v-model="consumermachine" placeholder="请选择" size="mini" clearable multiple>
          <el-option
            v-for="item in consumermachineoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="餐别分类显示:" v-if="activeName == 'second'">
        <el-checkbox v-model="mealFlag"></el-checkbox>
      </el-form-item>
    </el-form>
    <!-- 自定义表格头部 -->
    <operating-income-custom-header
      v-if="operatingincomecustomheaderVisible"
      ref="operatingincomecustomheader"
      @refreshDataList="getarea"
      :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
      @ExDataList="exdatalist"
      @printList="printlist"
    ></operating-income-custom-header>
    <div class="tabs_main">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="消费汇总" name="first">
          <!-- 消费汇总表 -->
          <operatin-income-summary-of-consumption
            v-if="operatinincomesummaryofconsmptionVisible"
            ref="operatinincomesummaryofconsumption"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :consumptionpoint="consumptionpoint"
            :radio="radio"
            :consumermachine="consumermachine"
          ></operatin-income-summary-of-consumption>
        </el-tab-pane>
        <el-tab-pane label="每日消费汇总" name="second">
          <!-- 每日消费汇总 -->
          <operating-income-daily-consumption-summary
            v-if="operatingincomedailyconsumptionsummaryVisible"
            ref="operatingincomedailyconsumptionsummary"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :consumptionpoint="consumptionpoint"
            :radio="radio"
            :consumermachine="consumermachine"
            :mealFlag="mealFlag"
          ></operating-income-daily-consumption-summary>
        </el-tab-pane>
        <el-tab-pane label="消费明细" name="three">
          <!-- 消费明细 -->
          <operating-income-consumer-details
            v-if="operatingincomeconsumerdetailsVisible"
            ref="operatingincomeconsumerdetails"
            :datetime="[datetime[0]+' '+time[0],datetime[1]+' '+time[1]]"
            :unitGuid="changeschoolid"
            :consumptionpoint="consumptionpoint"
            :radio="radio"
            :consumermachine="consumermachine"
          ></operating-income-consumer-details>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import OperatingIncomeCustomHeader from './operating-income-custom-header'
import OperatinIncomeSummaryOfConsumption from './operatin-income-summary-of-consumption'
import OperatingIncomeDailyConsumptionSummary from './operating-income-daily-consumption-summary'
import OperatingIncomeConsumerDetails from './operating-income-consumer-details'
export default {
  data() {
    return {
      // 餐别
      mealFlag: false,
      elform: {},
      // 判断是否是商户账号
      ismustFlag:false,
      consumptionpointoption: [],
      consumptionpoint: [],
      consumermachineoption: [],
      consumermachine: [],
      pageNum: 1,
      pageSize: 99999,
      pageNum2: 1,
      pageSize2: 99999,
      datetime: [],
      time: [],
      merchantGuid: '',
      searchInfo: {},
      searchInfo2: {},
      radio: 1,
      searchInfo3: {},
      operatingincomecustomheaderVisible: false,
      activeName: '',
      operatinincomesummaryofconsmptionVisible: false,
      operatingincomedailyconsumptionsummaryVisible: false,
      operatingincomeconsumerdetailsVisible: false
    }
  },
  created() {
    // 初始化时间
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
    this.userGuid = sessionStorage.getItem('administrator')
  },
  components: {
    OperatingIncomeCustomHeader,
    OperatinIncomeSummaryOfConsumption,
    OperatingIncomeDailyConsumptionSummary,
    OperatingIncomeConsumerDetails
  },
  mounted() {
    this.unitmerchantpage()
    this.activeName = 'first'
    this.handleClick()
    
    // 消费点的消费机
    // this.selcetconsumptionpoint() 
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
     handleGetTime(val) {
      this.datetime = [val.startDate, val.endDate]
      this.time = [val.startTime, val.endTime]
      this.radio = val.timeradio
    },
    //获取消费点
    unitmerchantpage() {
      this.searchInfo.unitGuid = this.changeschoolid
      this.searchInfo.operatorGuid = this.userGuid
      this.$http({
        url: this.$http.adornUrl('/terminal/merchant/unit-merchant-user-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            ...this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          
          let infoList = data.messageContent.merchantList || []
          // let mustFlag = true;
          let mustFlag = data.messageContent.mustFlag
            this.consumptionpoint = [];
          for (var i = 0; i < infoList.length; i++) {
            let objitem = {
              label: infoList[i].merchantName,
              value: infoList[i].merchantGuid
            }
            this.consumptionpointoption.push(objitem)
          }
          if(mustFlag){
            // console.log(this.consumptionpointoption[0])
            // this.consumptionpoint = [this.consumptionpointoption[0].value];
            this.ismustFlag = mustFlag;
          }else{
            this.ismustFlag = mustFlag;
          }

          // this.consumptionpointoption.push({
          //   label: "全部",
          //   value: "",
          // });
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 查询消费机编号列表
    selcetconsumptionpoint() {
      this.consumermachineoption = []
      this.consumermachine = []
      this.searchInfo2.merchantGuidList = this.consumptionpoint
      this.searchInfo2.terminalType = '1'
      this.searchInfo2.unitGuid = this.changeschoolid
      // if (this.consumptionpoint == '') {
      //   return
      // }
      // if (this.consumptionpoint == "all") {
      //   this.searchInfo2.merchantGuidList = "";
      // }
      this.$http({
        url: this.$http.adornUrl('/terminal/terminal-info-brief-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            ...this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.data2 = data.messageContent
          for (var i = 0; i < data.messageContent.length; i++) {
            let objitem = {
              label: data.messageContent[i].terminalName,
              value: data.messageContent[i].terminalCode
            }
            this.consumermachineoption.push(objitem)
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //消费店内消费机
    clearconsumptionpoint() {
      this.consumermachineoption = []
      this.consumermachine = []
    },
    handleClick() {
     
      if (this.activeName === 'first') {
        this.operatingincomecustomheaderVisible = true
        this.operatinincomesummaryofconsmptionVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomecustomheader.firstinit(this.activeName)
        })
        // this.$nextTick(() => {
        //    this.$refs.operatinincomesummaryofconsumption.gestatistics(this.searchInfo)
        // })
      }
      if (this.activeName === 'second') {
        this.operatingincomecustomheaderVisible = true
        this.operatingincomedailyconsumptionsummaryVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomecustomheader.firstinit(this.activeName)
        })
      }
      if (this.activeName === 'three') {
        this.operatingincomecustomheaderVisible = true
        this.operatingincomeconsumerdetailsVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomecustomheader.firstinit(this.activeName)
        })
      }
    },
    getarea(activeName) {
       if(this.ismustFlag && this.consumptionpoint.length == 0){
        this.$message({
          message: '请选择消费点后再进行查询',
          type: 'warning'
        })
        return false;
      }
      if (this.activeName == 'first') {
        this.operatinincomesummaryofconsmptionVisible = true
        this.$nextTick(() => {
          this.$refs.operatinincomesummaryofconsumption.gestatistics()
        })
      }
      if (this.activeName == 'second') {
        this.operatingincomedailyconsumptionsummaryVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomedailyconsumptionsummary.geteverdaygathermerchant()
        })
      }
      if (this.activeName == 'three') {
        this.operatingincomeconsumerdetailsVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomeconsumerdetails.getconsumedetailslist()
        })
      }
    },
    //导出
    exdatalist(activeName) {
      if (this.activeName == 'first') {
        this.operatinincomesummaryofconsmptionVisible = true
        this.$nextTick(() => {
          this.$refs.operatinincomesummaryofconsumption.export()
        })
      }
      if (this.activeName == 'second') {
        this.operatingincomedailyconsumptionsummaryVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomedailyconsumptionsummary.export()
        })
      }
      if (this.activeName == 'three') {
        this.operatingincomeconsumerdetailsVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomeconsumerdetails.export()
        })
      }
    },
    // 打印
    printlist() {
      if (this.activeName == 'first') {
        this.operatinincomesummaryofconsmptionVisible = true
        this.$nextTick(() => {
          this.$refs.operatinincomesummaryofconsumption.export('print')
        })
      }
      if (this.activeName == 'second') {
        this.operatingincomedailyconsumptionsummaryVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomedailyconsumptionsummary.export('print')
        })
      }
      if (this.activeName == 'three') {
        this.operatingincomeconsumerdetailsVisible = true
        this.$nextTick(() => {
          this.$refs.operatingincomeconsumerdetails.export('print')
        })
      }
    },

    changeradio() {
      if (this.radio == 1) {
        this.datetime = [
          this.getNowTime('yy-mm-dd'),
          this.getNowTime('yy-mm-dd')
        ]
        this.time = ['00:00:00', '23:59:59']
      }
      if (this.radio == 2) {
        this.datetime = [
          this.getNowTime('yy-mm-01'),
          this.getNowTime('yy-mm-31')
        ]
        this.time = ['00:00:00', '23:59:59']
      }
    },
    //获取时间
    gettime() {
      console.log(this.datetime)
      // this.datetime=[
      //   '2020-05-21 18:29:01',
      //   '2020-05-28 18:29:01'
      // ]
    }
  }
}
</script>

<style lang="scss" scoped>
.operating_income_stataistics {
  padding: 10px;
  // /deep/.el-radio {
  //   margin-right: 0px;
  // }
  .demo-form-inline,
  .demo-form-inline1 {
    //  .el-radio+.el-radio{
    //    margin-right: 10px;
    //  }
    /deep/.el-form-item__label {
      // padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
}
</style>